<template>
  <el-row>
    <el-form ref="searchFormRef" :inline="true" :model="searchInfo" label-width="auto" :rules="searchRules">
      <el-form-item label="设备名称" prop="name">
        <el-input v-model="searchInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="设备编号" prop="code">
        <el-input v-model="searchInfo.code"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="typeId">
        <el-select v-model="searchInfo.typeId" style="width:180px;">
          <el-option v-for="(item) in deviceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="reset">重置</el-button>
        <el-button type="primary" @click="searchDevices">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-row>
  <el-row>
    <el-table :data="deviceList" ref="deviceRef">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="code" label="设备编号"></el-table-column>
      <el-table-column prop="typeId" label="设备类型">
        <template #default="{ row }">
          {{ deviceTypeList.find(item => item.id === row.typeId)?.name }}
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; margin-left: auto; flex: flex-end;">
      <el-pagination size="small" layout="prev, pager, next" v-model:current-page="pageInfo.page"
        v-model:page-size="pageInfo.pageSize" :total="pageInfo.total"></el-pagination>
    </div>
  </el-row>
  <div>
    <el-button type="success" @click="confirm">确认</el-button>
  </div>
</template>

<script setup lang='js'>
import { getDeviceOrList } from '@/api/equipment/device'
import { getField } from '@/api/equipment/fields'
import { ref, watch } from 'vue'
const props = defineProps({
  deptId: Number,

})
// 搜索
const searchFormRef = ref(null)
const deviceTypeList = ref([])
getField('', '', 'deviceType').then(res => {
  deviceTypeList.value = res.data.data
})
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: ''
})
const searchInfo = ref({
  deptId: props.deptId,
  name: '',
  code: '',
  typeId: '',
})
async function reset() {
  searchFormRef.value.resetFields()
  console.log(props.deptId)
  await getDeviceOrList({ deptId: props.deptId, page: pageInfo.value.page, pageSize: pageInfo.value.pageSize }).then(res => {
    deviceList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
async function searchDevices() {
  await getDeviceOrList({ ...searchInfo.value, page: pageInfo.value.page, pageSize: pageInfo.value.pageSize }).then(res => {
    console.log(res.data.data)
    deviceList.value = res.data.data.records
    pageInfo.value.total = res.data.data.total
  })
}
// 确认
const deviceRef = ref(null)
const deviceSelected = defineModel("deviceSelected", { required: true, default: () => [] })
const drawVisiable = defineModel("drawVisiable", { required: true, default: true })
function confirm() {
  console.log(deviceRef.value.getSelectionRows())
  let device = deviceRef.value.getSelectionRows()
  device.forEach(item => item.status = '1')
  device.forEach(item => item.remark = '')
  deviceSelected.value = device
  drawVisiable.value = false
  console.log('select', deviceSelected.value)
}
// 刷新table数据

const deviceList = ref([])
watch(
  [() => props.deptId, deviceSelected],
  async (newValue) => {
    console.log('watch', newValue)
    await getDeviceOrList({ deptId: props.deptId, page: pageInfo.value.page, pageSize: pageInfo.value.pageSize }).then(res => {
      deviceList.value = res.data.data.records
      pageInfo.value.total = res.data.data.total
      console.log('设置设备默认选择项', deviceList.value)
      console.log(deviceSelected.value)
      deviceList.value.forEach(row => {
        deviceSelected.value.forEach(item => {
          setTimeout(() => {
            console.log('item.deviceId', typeof item.deviceId, item.deviceId)
            console.log('row.id', typeof row.id, row.id)
            console.log(item.deviceId === row.id)
            if (item.deviceId === row.id) {
              console.log('select', item)
              deviceRef.value.toggleRowSelection(row, true)
            }
          })
        })
      })
    })
  },
  { immediate: true, deep: true }
)
// watch(
//   deviceSelected,
//   (newValue) => {
//     console.log('设置设备默认选择项', deviceList.value)
//     deviceList.value.forEach(row => {
//       newValue.forEach(item => {
//         setTimeout(() => {
//           if (item.devideId === row.id) {
//             console.log('select', item)
//             deviceRef.value.toggleRowSelection(row, true)
//           }
//         })
//       }, 100)
//     })
//   },
//   { immediate: true, deep: true }
// )


</script>

<style scoped lang="less"></style>